<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery滑动图片角度插件</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/yz.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/jquery.min.js"></script> -->
<link rel="stylesheet" href="css/lrtk.css">
<style>
* {
	padding: 0;
	margin: 0;
}

body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.box {
	margin: 0 auto;
	position: absolute;
	left: 50%;
	top: 50%;
	height: 420px;
	width: 300px;
	margin-left: -150px;
	margin-top: -210px;
	border: 1px solid #ccc;
	background-color: #fff;
	border-radius: 25px;
	display: none;
	z-index: 2;
}

.top-s {
	font-size: 12px;
	color: #ccc;
	display: block;
	text-align: center;
	margin-left: 25px;
	margin-top: 25px;
	margin-bottom: 5px;
}

.top-x {
	font-size: 18px;
	color: black;
	display: block;
	text-align: center;
	margin-bottom: 45px;
}

.cuo {
	float: right;
	margin-right: 10px;
	margin-top: 5px;
	cursor: pointer;
}

#login {
	background-image:
		url(${pageContext.request.contextPath}/back/html/images/eve.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	padding: 300px;
}
</style>
</head>
<body>
	<div id="login">
		<div class="wrapper">
			<div class="login">
				<form action="${pageContext.request.contextPath}/ManagerServlet"
					method="post" class="container offset1 loginform">
					<!--隐藏域  -->
					<input type="hidden" name="op" value="login">

					<div id="owl-login">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad">
						<div class="control-group">
							<div class="controls">
								<label for="managerId" class="control-label fa fa-user"></label>
								<input id="managerId" type="text" name="managerId"
									placeholder="账号" tabindex="1" autofocus="autofocus"
									class="form-control input-medium">
							</div>
						</div>
						<div class="control-group">
							<div class="controls">
								<label for="password" class="control-label fa fa-asterisk"></label>
								<input id="password" type="password" name="password"
									placeholder="密码" tabindex="2" class="form-control input-medium">
							</div>
						</div>
					</div>
					<div class="form-actions">
						<a href="#" tabindex="5" class="pull-left"> <input
							type="checkbox" id="rememberPassword" name="rememberPassword"
							value="">记住密码
						</a>
						<button type="button" tabindex="4" class="btn btn-primary"
							id="managerLogin">登录</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!-- 滑块验证模块 -->
	<div class="box">
		<img src="images/sliderblock/cw.png" class="cuo"> <span
			class="top-s">身份验证</span> <span class="top-x">拖动滑块，使图片角度为正</span>
		<div id="rotateWrap1">
			<div class="rotateverify-contaniner">
				<div class="rotate-can-wrap">
					<canvas class="rotateCan rotate-can" width="200" height="200"></canvas>
					<div class="statusBg status-bg"></div>
				</div>
				<div class="control-wrap slideDragWrap">
					<div class="control-tips">
						<p class="c-tips-txt cTipsTxt">滑动将图片转正</p>
					</div>
					<div class="control-bor-wrap controlBorWrap"></div>
					<div class="control-btn slideDragBtn">
						<i class="control-btn-ico"></i>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
 		// 如果登录失败会弹出一个提示框
		var loginErrorMessage = "${param.loginErrorMessage}"; // ${param.参数名} EL表达式获取页面参数值
		if(loginErrorMessage != ""){
			alert("用户名或密码错误,请重新登录!");
		}// 如果登录失败会弹出一个提示框
    </script>

	<script>
    
    $(function() {
		//猫头鹰遮眼的触发事件
        $('#login #password').focus(function() {
            $('#owl-login').addClass('password');
        }).blur(function() {
            $('#owl-login').removeClass('password');
        });
        
     	// 对管理员工号输入框做失去焦点事件，当输入完后，判断cookie中是否存在该工号对应的name，如果有则返回value
		$("input[name='managerId']").blur(function(){
			var managerId = $(this).val(); // adminId表示用户输入的登录账号
			// 获取cookie指定name的value值
			var password = getCookie(managerId);// 登录账号是cookie中的name
			// 获取成功
			if(password != ""){
				// 填充数据
				$("input[name='password']").val(password);
				$("input[name='rememberPassword']").prop("checked",true);
			}else{
				$("input[name='password']").val("");
				$("input[name='rememberPassword']").prop("checked",false);
			}
		});
     	
     	//设置记住密码按钮的value值，默认为空串
		$("#rememberPassword").click(function(){
			if($("#rememberPassword").prop("checked") == true){
				$("#rememberPassword").val("rememberPassword");
			}else{
				$("#rememberPassword").val("");
			}
		});
    });
    
 	// 自定义函数
	// 通过cookie中指定的key,获取对应value值
	function getCookie(cname){
		
		var name = cname + "=";  // name="username="   name="password="
			
		var ca = document.cookie.split(';');// 根据分号进行字符串的切割,返回一个字符串数组  ca[0]="username=baby"  ca[1]=" password=123456"
		
		for(var i = 0; i < ca.length; i++) {// 遍历数组
			
			var c = ca[i].trim();   // ca[0]="username=baby"  ca[1]="password=123456" 
		
			if (c.indexOf(name)==0) {  // c="username=baby" name="username="  
				
				return c.substring(name.length,c.length);  // 字符串裁剪，得到value值
			}
		}
		return "";
	}
 	
 	//确定按钮触发滑块验证事件
    $("#managerLogin").click(function () {
		if($("#managerId").val()!="" && $("#managerId").val()!=""){
			myRotateVerify.resetSlide();//重置
			$(".box").css("display", "block");
			$("body").css({ "background": "#807878" });
			$("#managerLogin").attr("disabled", true);	
		}else{
			alert("账号和密码不能为空！");
		}
	})
	//    点击x
	$(".cuo").click(function () {
		$(".box").css("display", "none");
		$("body").css("background", "#fff");
		
	})
	//
	var myRotateVerify = new RotateVerify('#rotateWrap1', {
		initText: '滑动将图片转正',//默认
		slideImage: ['images/sliderblock/1.png', 'images/sliderblock/2.png', 'images/sliderblock/4.png', 'images/sliderblock/5.png'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
		slideAreaNum: 10,// 误差范围角度 +- 10(默认)
		getSuccessState: function (res) {//验证通过 返回  true;
			$(".box").css("display", "none");
			$("#managerLogin").attr("disabled", false);
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/ManagerServlet",
				type:"POST",
				data:{op:"login",
					managerId:$("#managerId").val(),
					password:$("#password").val(),
					rememberPassword:$("#rememberPassword").val()},
				dataType:"text",
				success:function(result,status,xhr){
					if(result=="success"){
						window.location="${pageContext.request.contextPath}/back/html/table_movie.jsp";
					}
				}
			})
		}
	})
	
    </script>
	<script>
    $(function() {
		//猫头鹰遮眼的触发事件
        $('#login #password').focus(function() {
            $('#owl-login').addClass('password');
        }).blur(function() {
            $('#owl-login').removeClass('password');
        });
        
     	// 对管理员工号输入框做失去焦点事件，当输入完后，判断cookie中是否存在该工号对应的name，如果有则返回value
		$("input[name='managerId']").blur(function(){
			var managerId = $(this).val(); // adminId表示用户输入的登录账号
			// 获取cookie指定name的value值
			var password = getCookie(managerId);// 登录账号是cookie中的name
			// 获取成功
			if(password != ""){
				// 填充数据
				$("input[name='password']").val(password);
				$("input[name='rememberPassword']").prop("checked",true);
			}else{
				$("input[name='password']").val("");
				$("input[name='rememberPassword']").prop("checked",false);
			}
		});
     	
     	//设置记住密码按钮的value值，默认为空串
		$("#rememberPassword").click(function(){
			if($("#rememberPassword").prop("checked") == true){
				$("#rememberPassword").val("rememberPassword");
			}else{
				$("#rememberPassword").val("");
			}
		});
    });
    
 	// 自定义函数
	// 通过cookie中指定的key,获取对应value值
	function getCookie(cname){
		
		var name = cname + "=";  // name="username="   name="password="
			
		var ca = document.cookie.split(';');// 根据分号进行字符串的切割,返回一个字符串数组  ca[0]="username=baby"  ca[1]=" password=123456"
		
		for(var i = 0; i < ca.length; i++) {// 遍历数组
			
			var c = ca[i].trim();   // ca[0]="username=baby"  ca[1]="password=123456" 
		
			if (c.indexOf(name)==0) {  // c="username=baby" name="username="  
				
				return c.substring(name.length,c.length);  // 字符串裁剪，得到value值
			}
		}
		return "";
	}
 	
 	//确定按钮触发滑块验证事件
	$("#managerLogin").click(function () {
		if($("#managerId").val()!="" && $("#password").val()!=""){
			myRotateVerify.resetSlide();//重置
			$(".box").css("display", "block");
			$("body").css({ "background": "#807878" });
			$("#managerLogin").attr("disabled", true);	
		}else{
			alert("账号和密码都不能为空！");
		}
	})
	//    点击x
	$(".cuo").click(function () {
		$(".box").css("display", "none");
		$("body").css("background", "#fff");
		$("#managerLogin").attr("disabled", false);
	})
	//
	var myRotateVerify = new RotateVerify('#rotateWrap1', {
		initText: '滑动将图片转正',//默认
		slideImage: ['images/sliderblock/1.png', 'images/sliderblock/2.png', 'images/sliderblock/4.png', 'images/sliderblock/5.png'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
		slideAreaNum: 10,// 误差范围角度 +- 10(默认)
		getSuccessState: function (res) {//验证通过 返回  true;
			$(".box").css("display", "none");
			$("#managerLogin").attr("disabled", false);
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/ManagerServlet",
				type:"POST",
				data:{op:"login",
					managerId:$("#managerId").val(),
					password:$("#password").val(),
					rememberPassword:$("#rememberPassword").val()},
				dataType:"text",
				success:function(result,status,xhr){
					if (result=="success"){
						window.location="${pageContext.request.contextPath}/back/html/table_movie.jsp";
					} else if (result=="failure"){
						alert("用户名或密码错误,请重新登录!");
					}
				},
				error:function(xhr,status,error){
					alert("异步请求失败!");
				}
			});
		}
	})
    </script>
</body>
</html>